@startuml
left to right direction
title Импорт классов, методов и переменных в компонентах расширения из отдельного файла

node "Browser" as BROWSER_NODE {
  folder "Active Tab" {
    component [content.js] as content_script
    folder "Web App" {
      component [inject.js] as inject_script
    }
    frame "DevTools" as DEVTOOLS_FRAME {
      component [devtools.js] as devtools_script #1278FF
      component [panel.js] as panel_script #1278FF
      component [panels_elements.js] as panels_elements_script #1278FF
      component [panels_sources.js] as panels_sources_scrip #1278FF
    }
  }

  frame "Options Tab" as OPTIONS_FRAME {
    component [options.js] as options_script #1278FF
  }

  component [utils.js] as utils_script

  frame "Popup Menu" as POPUP_FRAME {
    component [popup.js] as popup_script #1278FF
  }

  component [background.js] as background_script #1278FF

  devtools_script <-- utils_script
  panel_script <-- utils_script
  panels_elements_script <-- utils_script
  panels_sources_scrip <-- utils_script
  options_script <-- utils_script
  popup_script <-- utils_script
  background_script <-- utils_script

  note right of [background_script]
    Для возможности импорта
    в файле manifest.json в
    разделе подключния скрипта
    необходимо указать:
    "type": "module"
  end note
  note bottom of [utils_script]
    Для возможности импорта
    во всех компонентах кроме
    background.js в файле html
    необходимо указать:
    <script type="module" src="./name.js"></script>
  end note
}
@enduml